<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            height: 100vh;
            display: flex;
            flex-direction: column;

        }
        main{
            flex: 1;
            background: rgb(225, 226, 217);
        }
        footer{
            height: 60px;
            background: fuchsia;
            display: flex;
            /* 不加默认是row主轴为行 */
            flex-direction: row;
            /* 设置在主轴的对齐方式 */
            justify-content: space-between;
            border-top: solid 2px #000000;
        }
        footer section{
            
            flex: 1;
            background:skyblue;
            border-right: black solid 2px;
            display: flex;
            flex-direction:column-reverse ;
        }
        /* 去掉最后一个元素的线 */
        footer section:last-child{
            border-right: none;
        }
        footer section h4{
            flex: 0 0 60px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            cursor: pointer;
        }
        /* u1 */
        footer section ul{
            display: flex;
            flex-direction: column;
            border: yellow solid 2px;
            text-align: center;
            margin-bottom:5px;
            /* 圆角 */
            border-radius: 10px;
        }
        footer section ul li{
            flex: 1 0 50px;
            display: flex;
            /* 设置主轴方向垂直 */
            flex-direction: column;
            /* 设置主轴对齐方式居中 */
            justify-content: center;
            /* 添加下边线 */
            border-bottom: wheat solid 3px;
            cursor: pointer;
        }
        footer section ul li:last-child{
            border-bottom: none;
        }
        

    </style>
</head>
<body>
    <main></main>
    <footer>
        <section>
            <h4>学习内容</h4>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JS</li>
                <li>JS</li>
                <li>JS</li>
                <li>JS</li>

            </ul>
        </section>
        <section>
            <h4>学习资料</h4>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JS</li>
            </ul>
        </section>
        <section>
            <h4>学习时间</h4>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JS</li>
            </ul>
        </section>
    </footer>
</body>
</html>